<template>
  <view class="consumption_details">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <z-nav-bar id="nav" bgColor="#ffffff" title="消费明细"></z-nav-bar>
      </template>
      <up-sticky offset-top="0">
        <view class="df top_sel justify-between">
          <view class="df align-center"   @click="show = true">
            <text class="top_sel_text mgr-12">筛选日期:</text>
            <up-input

              style="width: 400rpx"
              v-model="date"
              :disabled="true"
              disabledColor="#fff"
              border="none"
              placeholder="请选择年月"
            ></up-input>
          </view>

        </view>
      </up-sticky>
      <view class="h_c"></view>
      <view class="records-cont-pot" >
        <view class="item" v-for="(item,index) in dataList" :key="index">
          <view  class="item-item flex-center-between">
            订单编号：
            <view>
              {{item.orderNo}}
            </view>
          </view>
          <view v-if="!isRepay" class="item-item flex-center-between">
            订单金额：
            <view class="bold">
              ￥{{item.orderAmount}}
            </view>
          </view>
          <view v-else class="item-item flex-center-between">
            还款金额：
            <view class="bold">
              ￥100.00
            </view>
          </view>
          <view class="item-item flex-center-between">
            结款方式：
            <view>
              {{item.paymentMethod}}
            </view>
          </view>
          <view class="item-item flex-center-between">
            付款用户：
            <view>
              {{item.payerName}}
            </view>
          </view>
          <view class="item-item flex-center-between">
            消费店铺：
            <view>
              {{item.storeName}}
            </view>
          </view>
          <view class="item-item flex-center-between">
            支付时间：
            <view>
             {{item.paymentTime}}
            </view>
          </view>
          <view v-if="isRepay" class="item-item flex-center-between">
            备注：
            <view>
              xxx
            </view>
          </view>
          <view class="flex-center-end">
            <view class="btn" @click="goJump(item.orderNo)">
              订单详情
            </view>
          </view>
        </view>
      </view>

    </z-paging>
    <up-datetime-picker
      ref="datetimePickerRef"
      :show="show"
      @cancel ="show = false"
      @close="close"
      :closeOnClickOverlay="true"
      v-model="value1"
      mode="date"
      :formatter="formatter"
      @confirm="confirm"
     
    ></up-datetime-picker>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onReady ,onLoad} from '@dcloudio/uni-app'
import {detailqryConsumplist} from '@/api/pagesMy/user'
const paging = ref(null)
const dataList = ref([])
const datetimePickerRef=ref(null)
const show = ref(false);
const date= ref('')
const groupCardNo = ref('')
const payerId = ref('')
const value1 = ref(Date.now());
const queryList = (pageNo, pageSize) => {
  detailqryConsumplist({
    pageNum:pageNo,
    pageSize:pageSize,
    groupCardNo: groupCardNo.value,
    payerId:payerId.value,
    startTime:date.value
  }).then(res=>{
    paging.value.complete(res)
  })
}
const formatter = (type, value) => {
  if (type === 'year') {
    return `${value}年`;
  }
  if (type === 'month') {
    return `${value}月`;
  }
   if (type === 'day') {
    return `${value}日`;
  }
  return value;
};
const confirm = (e) => {
  show.value = false
 date.value= formatDateYMD(e.value)
  paging.value.reload()
}
const close =()=>{
  show.value = false
}
function formatDateYMD(timestamp) {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}
function goJump(orderId) {
  uni.navigateTo({
    url: `/pages/cleaningOrder/orderDetails?orderId=${orderId}`
  })
}
onReady(() => {
  // 微信小程序需要用此写法
  datetimePickerRef.value.setFormatter(formatter);
});
onLoad((options)=>{
  groupCardNo.value = options.groupCardNo
  if (options.payerId) {
    payerId.value = options.payerId
  }
})
</script>

<style lang="scss" scoped>
@import "../style/common.scss";
.consumption_details{
  width: 100%;
  min-height: 100vh;
  //background-color: #FFFFFF;
}
.top_sel{
  box-sizing: border-box;
  padding: 32rpx ;
  width: 100%;
  background-color: #FFFFFF;
  .top_sel_text{
    font-size: 28rpx;
  }

}
.h_c{
  width: 100%;
  height: 16rpx;
  background-color: #F6F6F6;
}
.records-cont-pot{
  width: 100%;
  background-color: #FFFFFF;
  .title{
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 32rpx;
  }
  .item{
    padding: 32rpx 0 0;
    margin: 0 32rpx 0;
  }
  .btn{
    margin-bottom: 32rpx;
  }
}
</style>
